<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <th:block th:replace="~{layouts/common::form}"></th:block>
</head>
<body>
<div id="app">
    <div id="goods-form"></div>
</div>

</body>
<script>
    let { ref, createApp, reactive, defineProps } = Vue;
    let { ElMessage } = ElementPlus;
    const app = createApp({
        setup(){
            const root = document.getElementById('goods-form')

            const fApi = window.formCreate.create(
                //表单生成规则
                [
                    {
                        type: 'input',
                        field: 'goods_name',
                        title: '商品名称',
                        props: {
                            placeholder: '请输入商品名称',
                        },
                        col: {
                            span: 12
                        },
                        validate: [
                            {
                                required: true,
                                message: '请输入商品名称',
                                trigger: 'blur'
                            }
                        ],
                        on: {
                            change: function (value) {
                                console.log(value)
                            }
                        }
                    },
                    {
                        type: 'input',
                        field: 'goods_price',
                        title: '商品价格',
                        props: {
                            placeholder: '请输入商品价格'
                        }
                    },
                    {
                        type: 'datePicker',
                        field: 'created_at',
                        title: '创建时间'
                    },{
                        type: 'tableForm',
                        field: 'ss',
                        title: 'aaa',
                        props: {
                            rule: [
                                {
                                    type: 'input',
                                    field: 'goods_name',
                                    title: '商品名称',
                                    props: {
                                        placeholder: '请输入商品名称',
                                    },
                                    col: {
                                        span: 12
                                    },
                                    validate: [
                                        {
                                            required: true,
                                            message: '请输入商品名称',
                                        }
                                    ],
                                    emit: ['change'],
                                }
                            ]
                        }
                    },
                ],
                //组件参数配置
                {
                    el: root,
                    //显示表单重置按钮
                    resetBtn: true,
                    //表单提交事件
                    onSubmit: function (formData) {
                        //按钮进入提交状态
                        fApi.btn.loading();
                        layui.jquery.ajax({
                            url: '/admin-base/goods/save',
                            type: 'post',
                            data: formData,
                            success: function (res) {
                                //按钮进入默认状态
                                fApi.btn.loading();
                            },
                            complete: function () {
                                //按钮进入默认状态
                                fApi.btn.loading(false);
                            }
                        })
                    }
                })
        }
    });

</script>

<script>
    app.use(ElementPlus);
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
        formCreate.component(key, component);
    }
    app.mount('#app');
</script>
</html>